<template>
  <div style="width:100%;height:240px;" id="regionalAlarmBar"></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "dataSourcePie",
  props: {
    dataSource: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    dataSource(curVal, oldVal) {
      this.$nextTick(() => {
        this.initEchats();
      });
    }
  },
  mounted() {},
  methods: {
    initEchats() {
      var regionalAlarmChart = echarts.init(
        document.getElementById("regionalAlarmBar")
      );
      var lengendData = [];
      var seriesData = [];
      for (let i = 0; i < this.dataSource.length; i++) {
        let dataItem = this.dataSource[i];
        lengendData.push(dataItem.name);
        seriesData.push(dataItem.alarm_count);
      }

      let option = {
        color: [
          "#5867dd",
          "#1dc9b7",
          "#2786fb",
          "#ffb822",
          "#fd27eb",
          "#6610f2",
          "#6f42c1",
          "#e83e8c",
          "#dc3545",
          "#fd7e14",
          "#ffc107",
          "#28a745",
          "#20c997",
          "#17a2b8",
          "#e1e1ef",
          "#007bff"
        ],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: lengendData,
          orient: "vertical",
          x: "right"
        },
        xAxis: {
          type: "category",
          axisTick: { show: false },
          data: lengendData
        },
        yAxis: [
          {
            type: "value"
          }
        ],
        series: {
          name: "区域隐患告警",
          type: "bar",
          barWidth: "50%",
          data: seriesData,
          itemStyle: {
            normal: {
              color: function(params) {
                // build a color map as your need.
                var colorList = [
                  "#5867dd",
                  "#1dc9b7",
                  "#2786fb",
                  "#ffb822",
                  "#fd27eb",
                  "#6610f2",
                  "#6f42c1",
                  "#e83e8c",
                  "#dc3545",
                  "#fd7e14",
                  "#ffc107",
                  "#28a745",
                  "#20c997",
                  "#17a2b8",
                  "#e1e1ef",
                  "#007bff"
                ];
                return colorList[params.dataIndex];
              },
              label: {
                show: true,
                position: "top",
                formatter: "{b}\n{c}"
              }
            }
          }
        }
      };

      regionalAlarmChart.setOption(option);
      window.addEventListener("resize", function() {
        regionalAlarmChart.resize();
      });
    }
  }
};
</script>
